<template>
  <div class="data-form goods-model-form" v-loading.fullscreen.lock="loading">
    <el-form label-width="auto" size="medium">
      <el-form-item label="规格名称">
        <el-input v-if="type==='add'||formType==='add'" v-model="goodsModelForm.goodsModelName" class="form-input"></el-input>
        <span v-else>{{goodsModelForm.goodsModelName}}</span>
      </el-form-item>
      <el-form-item label="数量">
        <el-input-number v-if="canUpdate" v-model="goodsModelForm.goodsTotal" class="form-input" :min="1" :controls="false" :precision="0">
        </el-input-number>
        <span v-else>{{goodsModelForm.goodsTotal}}</span>
      </el-form-item>
      <el-form-item label="成本价">
        <el-input-number v-if="canUpdate" step-strictly v-model="goodsModelForm.goodsModelCost" class="form-input" :min="0.1" :step="0.1"
          :controls="false" :precision="2">
        </el-input-number>
        <span v-else>{{goodsModelForm.goodsModelCost}}</span>
      </el-form-item>
      <el-form-item label="渠道价">
        <el-input-number v-if="canUpdate" step-strictly v-model="goodsModelForm.goodsModelChannelPrice" class="form-input" :min="0.1" :step="0.1"
          :controls="false" :precision="2">
        </el-input-number>
        <span v-else>{{goodsModelForm.goodsModelChannelPrice}}</span>
      </el-form-item>
      <el-form-item label="销售价">
        <el-input-number step-strictly v-model="goodsModelForm.goodsModelSalePrice" class="form-input" :min="0.1" :step="0.1" :controls="false"
          :precision="2">
        </el-input-number>
      </el-form-item>
      <el-form-item label="原价">
        <el-input-number v-if="canUpdate" step-strictly v-model="goodsModelForm.goodsModelSourcePrice" class="form-input" :min="0.1" :step="0.1"
          :controls="false" :precision="2">
        </el-input-number>
        <span v-else>{{goodsModelForm.goodsModelSourcePrice}}</span>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-if="canUpdate" v-model="goodsModelForm.status" class="form-input">
          <el-option v-for="item in statusList" :key="item.value" :value="item.value" :label="item.label">
          </el-option>
        </el-select>
        <span v-else>{{i18n.getMsg(`goods.goodsModel.status.${goodsModelForm.status}`)}}</span>
      </el-form-item>
    </el-form>

    <div style="text-align:center">
      <el-button size="medium" type="primary" @click="saveModel">确定</el-button>
    </div>
  </div>
</template>

<script>
  import GoodsModelForm from 'models/goods/goodsModelForm';

  import GoodsApi from 'services/goodsApi';

  export default {
    props: {
      goodsModel: Object,
      goodsForm: Object,
      type: {
        type: String,
        default: 'add'
      },
      formType: {
        type: String,
        default: 'add'
      },
      isUpdatePrice: {
        type: Boolean,
        default: false
      }
    },

    computed: {
      canUpdate() {
        return ['add', 'update'].indexOf(this.formType) !== -1;
      }
    },

    data() {
      let type = this.type;
      let goodsModelForm;
      if (type === 'add') {
        goodsModelForm = new GoodsModelForm();
      } else {
        goodsModelForm = _.cloneDeep(this.goodsModel);
      }
      return {
        loading: false,
        goodsModelForm,
        statusList: this.i18n.getDropDown('goods.goodsModel.status', [1, 0])
      };
    },

    methods: {
      saveModel() {
        let goodsModelForm = this.goodsModelForm;
        let code = goodsModelForm.checkValid();
        if (code !== '') {
          let msg = this.i18n.getMsg(`goods.goodsModel.error.${code}`);
          this.$message(msg);
          return;
        }

        if (this.formType === 'add') {
          this.$emit('save-model', goodsModelForm, this.type);
          return;
        }

        if (this.type === 'add') {
          this.addGoodsModel(goodsModelForm);
        } else {
          this.updateGoodsModel(goodsModelForm);
        }
      },

      addGoodsModel(goodsModelForm) {
        let goodsForm = this.goodsForm;
        let goodsModelList = goodsForm.goodsModelList;
        let obj = _.find(goodsModelList, {
          goodsModelName: goodsModelForm.goodsModelName
        });
        if (obj !== undefined) {
          this.$message('规格名称重复');
          return;
        }

        this.loading = true;
        GoodsApi.addGoodsModel(goodsModelForm, goodsForm.id).then(() => {
          this.loading = false;
          this.$alert('商品的规格新增成功', '信息', {
            callback: () => {
              this.$emit('save-success');
            }
          });
        }).catch(() => {
          this.loading = false;
        });
      },

      updateGoodsModel(goodsModelForm) {
        if (this.canUpdate) {
          this.toUpdateGoodsModel(goodsModelForm);
          return;
        }

        let msg = `商品价格更改为${goodsModelForm.goodsModelSalePrice}元，我已知晓`;
        this.$confirm(msg, '提示', {
          confirmButtonText: "知晓",
          cancelButtonText: "取消"
        }).then(() => {
          this.toUpdateGoodsModel(goodsModelForm);
        }).catch(() => {});
      },

      toUpdateGoodsModel(goodsModelForm) {
        this.loading = true;
        GoodsApi.updateGoodsModel(goodsModelForm).then(() => {
          this.loading = false;
          this.$alert('商品的规格修改成功', '信息', {
            callback: () => {
              this.$emit('save-success');
            }
          });
        }).catch(() => {
          this.loading = false;
        });
      }
    }
  };

</script>

<style lang="scss" scoped>
  @import '~viewStyle/dataForm';

</style>
